<template>
  <div class="all_product">
    <!-- 头部导航栏 -->
    <navbar title="特价商品" />
    <!-- 商品展示区域 -->
    <div class="products_group">
      <product :product="product"  v-for="product in disCountProducts" :key="product.id"/>
    </div>
  </div>
</template>

<script>
import Product from '../components/Product.vue'
import NavBar from '../components/NavBar.vue'
import { IMAGE_PREFIX } from '../config'
export default {
  components: {
    product: Product,
    navbar: NavBar
  },
  data () {
    return {
      // 折扣商品数据
      disCountProducts: []
    }
  },
  methods: {
    // 获取促销商品列表
    getProducts () {
      this.$http.get('/home/discount_all').then(({ data: resp }) => {
        const { meta, data } = resp
        if (meta.code !== 200) {
          return this.$notify(meta.msg)
        }
        this.allDisCountProductParser(data)
      })
    },
    // 数据解析器
    allDisCountProductParser (rowData) {
      // console.log(rowData)
      const disCountProducts = []
      rowData.map(({ id, product }) => {
        const price = product.list[0].price
        const oldPrice = product.list[0].oldPrice
        const { id: productId, name, image: imageStr, info } = product
        const productObj = {}
        const image = IMAGE_PREFIX + imageStr.split(';')[0]
        productObj.name = name
        productObj.id = productId
        productObj.image = image
        productObj.price = price
        productObj.old_price = oldPrice
        productObj.desc = info
        disCountProducts.push(productObj)
      })
      // console.log(disCountProducts)
      this.disCountProducts = disCountProducts
    }
  },
  created () {
    this.getProducts()
  }
}
</script>

<style lang="less" scope="scoped">
.all_product{
  width:100%;
  box-sizing: border-box;
  .products_group{
    width:100%;
    box-sizing: border-box;
  }
}
</style>
